<template>
    <div
    class="container"
    >
        <div
        class="wrapper"
        >
            <div class="title">{{this.title}}</div>
            <span
            class="iconfont close"
            @click="handleCloseClick">&#xe625;</span>
            <div class="wrapper-price">
                <span class="before">￥</span>
                <em class="price">{{this.price}}</em>
                <span class="after">/张</span>
            </div>
            <router-link to="/order">
                    <div
                    class="wrapper-book"
                    @click="toBus"
                    >立即预订</div>
            </router-link>
        </div>
    </div>
</template>

<script>
import Bus from '../../assets/styles/eventBus.js'
export default {
    name: 'CommonBook',
    props: {
        price: String,
        title: String,
        img: String
    },
    methods: {
        handleCloseClick () {
            this.$emit('close')
        },
        toBus () {
            // 解决首次无法监听问题 防止$emit先于$on执行，导致数据传不到
            setTimeout(() => {
                Bus.$emit('on', this.price, this.title)
            }, 30)
        }
    }
}
</script>

<style lang="stylus" scoped>
    .container
        z-index 99
        position fixed
        left 0
        right 0
        top 0
        bottom 0
        background rgba(0, 0, 0, .5)
        .wrapper
            position absolute
            bottom 0
            width 100%
            height 4.5rem
            background-color #fff
            .title
                width 80%
                padding .5rem .2rem 0
                font-size .36rem
                line-height .42rem
            .close
                position absolute
                right 0
                top .1rem
                padding .2rem
                font-size .4rem
            .wrapper-price
                padding .3rem
                color #888
                font-size 0
                .before
                    font-size .2rem
                    color #ff8300
                .price
                    color #ff8300
                    font-size .5rem
                    margin-left 0
                .after
                    font-size .2rem
            .wrapper-book
                position absolute
                bottom 0
                width 100%
                height 1.3rem
                line-height 1.3rem
                background-color #ff8300
                text-align center
                font-size .38rem
                color #fff
</style>
